<template>
  <el-card class="access" shadow="hover">
    <template #header>
      <!-- <vab-icon icon="line-chart-line" /> -->
      客户量
      <!-- <el-tag class="card-header-tag" type="success">日</el-tag> -->
    </template>
    <div style="display: flex; justify-content: space-between">
      <div>最近7天</div>
      <div>合计:{{ total }}%</div>
    </div>
    <div class="divOfLastDay01">
      昨日:
      <span class="cordOfSpan01">{{ yesterdayData }}</span>
      %
    </div>
    <div class="divOfCompare01">
      环比:
      <img
        v-if="chainData - 1 > 0"
        src="./upup.png"
        style="width: 12px; heihgt: 14px"
      />
      <img
        v-else-if="chainData - 1 < 0"
        src="./downdown.png"
        style="width: 12px; heihgt: 14px"
      />
      {{ Math.abs((chainData - 1).toFixed(2)) * 100 }}%
    </div>
    <div>
      同比:
      <img
        v-if="yearOnYearData - 1 > 0"
        src="./upup.png"
        style="width: 12px; heihgt: 14px"
      />
      <img
        v-else-if="yearOnYearData - 1 < 0"
        src="./downdown.png"
        style="width: 12px; heihgt: 14px"
      />
      {{ Math.abs((yearOnYearData - 1).toFixed(2)) * 100 }}%
    </div>
    <!-- <vab-chart
      :init-options="initOptions"
      :option="option"
      theme="vab-echarts-theme"
    /> -->
    <!-- <div class="bottom">
      <span>
        日均访问量:

        <vab-count
          :decimals="countConfig.decimals"
          :duration="countConfig.duration"
          :end-val="countConfig.endVal"
          :prefix="countConfig.prefix"
          :separator="countConfig.separator"
          :start-val="countConfig.startVal"
          :suffix="countConfig.suffix"
        />
      </span>
    </div> -->
  </el-card>
</template>

<style>
.cordOfSpan01 {
  font-size: 50px;
}
.divOfLastDay01 {
  margin-top: 20px;
}
.divOfCompare01 {
  margin: 15px 0;
}
.access {
  height: 200px;
}
</style>

<script>
import VabChart from '@/extra/VabChart'
import VabCount from '@/extra/VabCount'
import _ from 'lodash'
import { customData } from '@/api/index/supplier'

export default {
  components: {
    VabChart,
    VabCount,
  },
  data() {
    return {
      total: 0,
      yesterdayData: 0,
      chainData: 0,
      yearOnYearData: 0,
      countConfig: {
        startVal: 0,
        endVal: _.random(20000, 60000),
        decimals: 0,
        prefix: '',
        suffix: '',
        separator: ',',
        duration: 8000,
      },
      initOptions: {
        renderer: 'svg',
      },
      option: {
        tooltip: {
          trigger: 'axis',
          extraCssText: 'z-index:1',
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '访问量',
            type: 'line',
            data: [],
            smooth: true,
            areaStyle: {},
            itemStyle: {
              borderRadius: [0, 5, 5, 0],
              color: new VabChart.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ['#3ED572', '#399efd'].map((color, offset) => ({
                  color,
                  offset,
                }))
              ),
            },
          },
        ],
      },
    }
  },
  methods: {
    async TrrigersupplierData() {
      const res = await customData()
      this.total = res.data.sevenTotal
      this.yesterdayData = res.data.yesterday
      this.yearOnYearData = res.data.yearOnYear
      this.chainData = res.data.chain
    },
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
    clearInterval(this.timers)
    this.timers = null
  },
  mounted() {
    this.timer = setInterval(() => {
      this.TrrigersupplierData()
    }, 10000)
    this.TrrigersupplierData()
    const base = +new Date(2020, 1, 1)
    const oneDay = 24 * 3600 * 1000
    const date = []

    const data = [Math.random() * 1500]
    let now = new Date(base)

    const addData = (shift) => {
      now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
      date.push(now)
      data.push(_.random(20000, 60000))

      if (shift) {
        date.shift()
        data.shift()
      }

      now = new Date(+new Date(now) + oneDay)
    }

    for (let i = 1; i < 6; i++) {
      addData()
    }
    addData(true)
    this.option.xAxis[0].data = date
    this.option.series[0].data = data
    this.timers = setInterval(() => {
      addData(true)
      this.option.xAxis[0].data = date
      this.option.series[0].data = data
    }, 6000)
  },
}
</script>
